<template>
	<PageLayout title="我的电子名片" :show-back="false">
		<view class="card-container">
			<!-- 用条件渲染替代动态组件 -->
			<template v-if="selectedTemplateComponent === 'TemplateDefault'">
				<TemplateDefault :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent == 'TemplateElegant'">
				<TemplateElegant :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent === 'TemplateModern'">
				<TemplateModern :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent === 'TemplateProfessional'">
				<TemplateProfessional :card-info="cardInfo" />
			</template>
		</view>
		<view class="card-change">
			<text>交换名片</text>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	import {
		useRouter
	} from '@/plugin/uni-mini-router'
	import TemplateDefault from '@/pages/card/components/TemplateDefault'
	import TemplateElegant from '@/pages/card/components/TemplateElegant'
	import TemplateModern from '@/pages/card/components/TemplateModern'
	import TemplateProfessional from '@/pages/card/components/TemplateProfessional'

	import {
		cardStore
	} from '@/store/card.ts';

	const cdStore = cardStore()


	// 路由实例
	const router = useRouter()

	// 状态管理
	const {
		templateInfo,
		cardInfo
	} = cdStore

	onMounted(() => {})

	// 根据选中的模板动态选择组件
	const selectedTemplateComponent = computed(() => {
		switch (templateInfo.type) {
			case 'default':
				return "TemplateDefault"
			case 'elegant':
				return "TemplateElegant"
			case 'modern':
				return "TemplateModern"
			case 'professional':
				return "TemplateProfessional"
			default:
				return "TemplateDefault"
		}
	})
</script>

<style scoped>
	.card-container {
		padding: 20rpx;
		min-height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-change {
		position: fixed;
		bottom: 60rpx;
		margin-top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #007aff;
		color: white;
		padding: 20rpx 60rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>